<template>
  <div>
    <ul>
      <li
        v-for="(item, i) in list"
        :key="i"
        :style="{ background: item.bgc }"
        :class="index === i ? 'active' : ''"
        @click="choseDream(item, i)"
      ></li>
    </ul>
  </div>
</template>
<script>

export default {
  data() {
    return {
      list: [
        { bgc: "red" },
        { bgc: "blue" },
        { bgc: "black" },
        { bgc: "pink" },
        { bgc: "yellow" },
      ],
      index: -1,
    };
  },
  methods: {
    choseDream(item, i) {
      this.index = i;
      // 用$emit把值传到父组件中使用
      this.$emit("sendimg", item);
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.3rem;
    li {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .active {
      border:3px solid rgb(0, 255, 38);
    }
  }
}
</style>